<%--
  Created by IntelliJ IDEA.
  User: lxm
  Date: 2018/2/7
  Time: 下午3:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>自然语言处理-语篇分析</title>
    <jsp:include page="../static/common/stylesheets.jsp"></jsp:include>
    <style>

        .icon {
            position: relative;
            font-size: 15px;
            height: 32px;
            display: block;
            fill: rgba(51, 51, 51, 0.5);
            margin-right: 20px;
            -webkit-transition: all .2s ease-out;
            transition: all .2s ease-out;
        }

        .icon.active {
            fill: #E74C3C;
        }

        .icon.big {
            width: 64px;
            height: 64px;
            fill: rgba(51, 51, 51, 0.5);
        }

        #wrapper {
            min-height: 700px;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: left;
            -webkit-justify-content: left;
            -ms-flex-pack: left;
            justify-content: left;

        }

        #left-side {
            height: 70%;
            width: 15%;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

        #left-side ul li {
            padding-top: 10px;
            padding-bottom: 10px;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            line-height: 34px;
            color: rgba(51, 51, 51, 0.5);
            font-weight: 500;
            cursor: pointer;
            -webkit-transition: all .2s ease-out;
            transition: all .2s ease-out;
        }

        #left-side ul li:hover {
            color: #333333;
            -webkit-transition: all .2s ease-out;
            transition: all .2s ease-out;
        }

        #left-side ul li:hover > .icon {
            fill: #333;
        }

        #left-side ul li.active {
            color: #333333;
        }

        #left-side ul li.active:hover > .icon {
            fill: #E74C3C;
        }

        #border {
            height: 600px;
            width: 1px;
            background-color: rgba(51, 51, 51, 0.2);
        }

        #border #line {
            width: 5px;
            height: 54px;
            background-color: #E74C3C;
            margin-left: -2px;
            margin-top: 7px;
            -webkit-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
        }

        #right-side {
            /*height: 300px;*/
            min-height: 650px;
            width: 85%;
            /*overflow: hidden;*/
        }

        #right-side #first, #right-side #second, #right-side #third, #right-side #fourth {
            position: absolute;
            height: 300px;
            width: 75%;
            -webkit-transition: all .6s ease-in-out;
            transition: all .6s ease-in-out;
            margin-top: -350px;
            opacity: 0;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
        }

        #right-side #first.active, #right-side #second.active, #right-side #third.active, #right-side #fourth.active {
            margin-top: 0px;
            opacity: 1;
            -webkit-transition: all .6s ease-in-out;
            transition: all .6s ease-in-out;
        }

        .tab-active {
            color: #333333;
            margin-top: 0px;
            opacity: 1;
            -webkit-transition: all .6s ease-in-out;
            transition: all .6s ease-in-out;
        }

        .tab-content-active {
            margin-top: 0px;
            opacity: 1;
            -webkit-transition: all .6s ease-in-out;
            transition: all .6s ease-in-out;
        }

        .site-desc {
            position: relative;
            height: 70px;
            margin-top: 25px;
            background: url(/static/layui/images/common/discourse-desc.png) center no-repeat;
        }
    </style>
    <link rel="stylesheet" type="text/css" media="all" href="/static/layui/css/discourse.css"/>
</head>
<body style="background: #fff" onload="loadBayesModelTags()">
<%--导航栏--%>
<jsp:include page="../static/common/header.jsp"></jsp:include>
<%--Banner的图--%>
<div class="site-banner" style="color: white;">
    <div class="site-banner-bg" style="background-image: url(/static/layui/images/words/bg_discourse.jpg);">
    </div>
    <div class="site-banner-main">
        <div class="site-zfj site-zfj-anim">
            <i class="layui-icon" style="color: #fff; color: rgba(255,255,255,1);">&#xe631;</i>
        </div>
        <div class="layui-anim site-desc site-desc-anim banner-font-color">
            <cite class="banner-font-color"
                  style="color: white">一个丰富的可视化自然语言处理工具集,支持API调用。</cite>
        </div>
        <div class="site-download">
            <a href="#" class="layui-inline site-down" onclick="AnchorClick($('#start'))">
                立即体验
            </a>
        </div>
    </div>
</div>
<div class="layui-main"
     style="font: 14px Helvetica Neue, Helvetica, PingFang SC, \5FAE\8F6F\96C5\9ED1, Tahoma, Arial, sans-serif;">
    <%--语篇分析介绍开始--%>
    <h1 id="introduction" class="site-h1" style="text-align: center;"><B>句法分析</B></h1>
    <p style="margin-left: auto;margin-right: auto;width: 70%;text-align: center;" class="gray-p">

        一个丰富的可视化自然语言处理工具集，包含了各种常用的文本统计工具，主题预测工具等。
        特别地，提供用户高度可定制的接口，如贝叶斯用户训练接口，词云接口等。
    </p>
    <%--语篇分析介绍结束--%>
    <%--开始使用--%>
    <h1 id="start" class="site-h1" style="text-align: center;"><B>开始使用</B></h1><br>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md12">
                <p class="gray-p">请输入一段想分析的文本：
                    <span class="span_seg_single" onclick="ramdomTexts()">随机示例</span>
                    <span class="r count_txt gray-p">还能输入<strong id="currentLength">2000</strong>字</span>
                </p>
                <br>
                <%--单文本的文本框--%>
                <div class="layui-form-item layui-form-text">
                            <textarea id="text_main_text" placeholder="请输入内容" class="layui-textarea p-font"
                                      style="min-height: 240px;"></textarea>
                </div>
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>分析结果</legend>
                </fieldset>
                <div id="wrapper">
                    <div id="left-side">
                        <ul style="margin-left: 35px;">
                            <li class="choose word-cloud">
                                <div class="icon" onclick="changeTab($(this))">
                                    <i class="fa fa-cloud" aria-hidden="true"> 词云</i>
                                </div>

                            </li>
                            <li class="choose word-statistics" onclick="changeTab($(this))">
                                <div class="icon">
                                    <i class="fa fa-table" aria-hidden="true"> 词频统计</i>
                                </div>
                            </li>
                            <li class="choose word-entity" onclick="changeTab($(this))">
                                <div class="icon">
                                    <i class="fa fa-object-ungroup" aria-hidden="true"> 实体提取</i>
                                </div>
                            </li>
                            <li class="choose word-theme" onclick="changeTab($(this))">
                                <div class="icon">
                                    <i class="fa fa-file-excel-o" aria-hidden="true"> 主题抽取</i>
                                </div>
                            </li>
                            <li class="choose word-emotion" onclick="changeTab($(this))">
                                <div class="icon">
                                    <i class="fa fa-smile-o" aria-hidden="true"> 情感分析</i>
                                </div>
                            </li>
                            <li class="choose word-keyword" onclick="changeTab($(this))">
                                <div class="icon">
                                    <i class="fa fa-key" aria-hidden="true"> 关键字抽取</i>
                                </div>
                            </li>
                            <li class="choose word-vec" onclick="changeTab($(this))">
                                <div class="icon">
                                    <i class="fa fa-codepen" aria-hidden="true"> 贝叶斯分类</i>
                                </div>
                            </li>
                            <li class="choose word-map" onclick="changeTab($(this))">
                                <div class="icon">
                                    <i class="fa fa-map-o" aria-hidden="true"> 地域可视</i>
                                </div>
                            </li>
                            <li class="choose word-sensitive" onclick="changeTab($(this))">
                                <div class="icon">
                                    <i class="fa fa-exclamation-triangle" aria-hidden="true"> 敏感词汇</i>
                                </div>
                            </li>
                            <li class="choose word-abstract" onclick="changeTab($(this))">
                                <div class="icon">
                                    <i class="fa fa-list-alt" aria-hidden="true"> 自动摘要</i>
                                </div>
                            </li>
                            <li class="choose word-same" onclick="changeTab($(this))">
                                <div class="icon">
                                    <i class="fa fa-braille" aria-hidden="true"> 文本相似度</i>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div id="border">
                        <div id="line" class="line"></div>
                    </div>
                    <div id="right-side">
                        <div class="layui-container div_content_0" style="width: 980px;">
                            <div class="layui-row word-cloud-content">
                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                                    <fieldset class="layui-elem-field layui-field-title">
                                        <legend>词云</legend>
                                        <div class="layui-field-box">
                                            <jsp:include page="partOfDiscourse/wordCloud.jsp"></jsp:include>
                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                        <div class="layui-container div_content_1" style="width: 980px; display: none;">
                            <div class="layui-row word-cloud-content ">
                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                                    <fieldset class="layui-elem-field layui-field-title">
                                        <legend>词频统计</legend>
                                        <div class="layui-field-box">
                                            <jsp:include page="partOfDiscourse/wordFrequency.jsp"></jsp:include>
                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                        <div class="layui-container div_content_2" style="width: 980px;display: none;">
                            <div class="layui-row word-cloud-content ">
                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                                    <fieldset class="layui-elem-field layui-field-title">
                                        <legend>实体提取</legend>
                                        <div class="layui-field-box">
                                            <jsp:include page="partOfDiscourse/wordNamedEntity.jsp"></jsp:include>
                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                        <div class="layui-container div_content_3" style="width: 980px;display: none;">
                            <div class="layui-row word-cloud-content ">
                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                                    <fieldset class="layui-elem-field layui-field-title">
                                        <legend>主题抽取</legend>
                                        <div class="layui-field-box">
                                            <jsp:include page="partOfDiscourse/theme.jsp"></jsp:include>

                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                        <div class="layui-container div_content_4" style="width: 980px;display: none;">
                            <div class="layui-row word-cloud-content ">
                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                                    <fieldset class="layui-elem-field layui-field-title">
                                        <legend>情感分析</legend>
                                        <div class="layui-field-box">
                                            <jsp:include page="partOfDiscourse/emotion.jsp"></jsp:include>

                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                        <div class="layui-container div_content_5" style="width: 980px;display: none;">
                            <div class="layui-row word-cloud-content ">
                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                                    <fieldset class="layui-elem-field layui-field-title">
                                        <legend>关键词提取</legend>
                                        <div class="layui-field-box">
                                            <jsp:include page="partOfDiscourse/keywords.jsp"></jsp:include>
                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                        <div class="layui-container div_content_6" style="width: 980px;display: none;">
                            <div class="layui-row word-cloud-content ">
                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                                    <fieldset class="layui-elem-field layui-field-title">
                                        <legend>贝叶斯分类</legend>
                                        <div class="layui-field-box">
                                            <jsp:include page="partOfDiscourse/vector.jsp"></jsp:include>
                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                        <div class="layui-container div_content_7" style="width: 980px;display: none;">
                            <div class="layui-row word-cloud-content ">
                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                                    <fieldset class="layui-elem-field layui-field-title">
                                        <legend>地域可视化</legend>
                                        <div class="layui-field-box">
                                            <jsp:include page="partOfDiscourse/map.jsp"></jsp:include>
                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                        <div class="layui-container div_content_8" style="width: 980px;display: none;">
                            <div class="layui-row word-cloud-content ">
                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                                    <fieldset class="layui-elem-field layui-field-title">
                                        <legend>敏感词汇</legend>
                                        <div class="layui-field-box">
                                            <jsp:include page="partOfDiscourse/sensitive.jsp"></jsp:include>

                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                        <div class="layui-container div_content_9" style="width: 980px;display: none;">
                            <div class="layui-row word-cloud-content ">
                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                                    <fieldset class="layui-elem-field layui-field-title">
                                        <legend>自动摘要</legend>
                                        <div class="layui-field-box">
                                            <jsp:include page="partOfDiscourse/abstract.jsp"></jsp:include>
                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                        <div class="layui-container div_content_10" style="width: 980px;display: none;">
                            <div class="layui-row word-cloud-content ">
                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                                    <fieldset class="layui-elem-field layui-field-title">
                                        <legend>文本相似度对比</legend>
                                        <div class="layui-field-box">
                                            <jsp:include page="partOfDiscourse/similarity.jsp"></jsp:include>
                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <%--开始使用结束--%>
        <h1 id="application" class="site-h1" style="text-align: center;"><B>应用场景</B></h1>
        <ul class="site-idea">
            <li>
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>词频分析</legend>
                    <p class="gray-p"> 1、有人分析了42万字的歌词搞清楚了民谣歌手们在唱什么。
                    2、政府工作报告与2016年的进行了词频对比，发现“创新”、“创业”提得少了，“群众”、“改革”提得多了，这从某种程度上可以反映决策层的思路变化。
                </fieldset>
            </li>
            <li>
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>主题识别</legend>
                    <p class="gray-p">本平台可以提供准确率高而且具有较高在线处理效率,可以应用于多种用户查询意图识别相关的应用场景</p>
                </fieldset>
            </li>
            <li>
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>贝叶斯分类器</legend>
                    <p class="gray-p">新闻分类、病人分类、邮件过滤等等只要能提供训练数据且每项特征独立性高的都可以做贝叶斯分类。</p>
                </fieldset>
            </li>
        </ul>
        <br>
        <%--语篇分析应用场景结束--%>
    </div>
</body>
<jsp:include page="../static/common/footer.jsp"></jsp:include>
<jsp:include page="../static/common/scripts.jsp"></jsp:include>
<%--页面主要逻辑加载--%>
<script src="/static/layui/js/discourse/discourseLogic.js"></script>
<%--两个图表的加载--%>
<script src="/static/layui/js/charts/Echarts/map/js/staticMap.js"></script>
<script src="/static/layui/js/charts/Echarts/echarts.min.js"></script>
<script src="/static/layui/js/charts/Echarts/echarts-gl.js"></script>
<script src="/static/layui/js/charts/Echarts/map/js/china.js"></script>
<script src="/static/layui/js/discourse/chartsConfig.js"></script>
<!-- 引入echart的主题 -->
<script src="/static/layui/js/charts/Echarts/theme/macarons.js"></script>
<script src="/static/layui/js/charts/Echarts/theme/roma.js"></script>
<script src="/static/layui/js/charts/Echarts/theme/shine.js"></script>
<script src="/static/layui/js/charts/Echarts/theme/infographic.js"></script>
<%--加载贝叶斯模型的tag标签--%>
<script>
    function loadBayesModelTags() {
        jQuery.ajax({
            url: discourse_bayes_models_tags,
            type: "get",
            dataType: "json",
            contentType: "application/json;charset=utf-8"
        }).done(function (data) {

            console.log(data);
            data = data.data;
            setTimeout(function () {
                $('#modelTag').empty();
            }, 2000);

            for (var i = 0; i < data.length; i++) {
                $('#modelTag').append('<option value="' + data[i].tag + '">' + data[i].name + '</option>');
            }
            layui.form.on('select(select_emotion)', function (data) {
                console.log("选中了:" + data.value); //得到被选中的值
                emotion_model_tag = data.value;
            });
            layui.form.render(); //更新全部

            layer.close(layerIndex);
        }).fail(function (data) {
            layer.alert("请求失败", {icon: 7});
            layer.close(layerIndex);
        });
    }
</script>

<script>
    //更新导航
    nowPageName("tools");
</script>
<script>
    var randomArray = [
        "张学洪书记在开班仪式上作动员讲话。张书记强调，要统一思想，充分认识学习培训的重要意义。要深刻领会过去５年党和国家事业取得新的历史性成就；要深刻领会中国特色社会主义进入了“新时代”这一关系全局的重大判断；要深刻领会中国特色社会主义新时代的两大新任务；要深刻领会习近平新时代中国特色社会主义思想；要深刻领会社会主义经济建设、政治建设、文化建设、社会建设、生态文明建设等方面的重大部署；要深刻领会不断提高党的执政能力和领导水平。张书记指出，此次培训，要着眼于当前学校的重点工作，实现“四个结合”：一是把学习贯彻党的十九大精神与贯彻习总书记在北京大学师生座谈会的重要讲话精神有机结合起来。二是把学习贯彻党的十九大精神与贯彻落实学校第三次党代会精神有机结合起来。三是把学习贯彻党的十九大精神与全面推进综合改革和“双一流”建设有机结合起来。四是把学习贯彻党的十九大精神与全面从严治党有机结合起来。\n" +
        "" +
        "张书记要求，要坚持问题导向，不断增强学习培训的针对性和实效性。他指出，当前我校中层干部队伍离新时代干部的要求，离十九大提出的高素质专业化干部的标准还存在一定差距，具体表现在理论学用意识不强，责任担当意识不够，执行力不强、效率不高等，要通过培训研讨，切实提高干部队伍的素质和能力，希望全体中层干部在思想上要高度重视。聚焦学懂、弄通、做实，持续深入抓好十九大精神的学习宣传贯彻。在实际工作中，要对照年初目标任务，强化紧迫意识，忧患意识，科学全面、统筹安排好各项工作，确保完成年度目标任务，以优异成绩展现学习贯彻十九大精神的成果。希望全体中层干部理论联系实际，用心领会，学以致用。不断提高把握方向的能力、驾驭全局的能力、创新发展的能力、服务师生的能力、合作共事的能力、反腐倡廉的能力。尤其重要的是，要把学深学透作为“硬任务”，并通过集中各方面智慧提出新思路、开创新局面，使政策的正向效应尽快在学校各项管理工作中得到充分释放。要不断更新知识结构，坚持学有所成，把知识变为能力，做到干一行爱一行、钻一行精一行、管一行像一行。张书记希望大家能够用党的十九大精神的高标准、新时代的新方位来衡量工作，做敢担当、勇担责的好干部，成为干事创业，推动发展的中坚力量，为学校的发展做出应有的贡献。张书记强调，要在学习的过程中结合实际，在谋划和推动工作的过程中做好转化文章，聚焦聚力贯彻落实党的十九大精神在桂电的落实生根、开花结果。"
    ];

    //随机示例：
    function ramdomTexts() {
        $('#text_main_text').empty();
        var index = Math.floor(Math.random() * 100 + 1) % randomArray.length;
        $('#text_main_text').val(randomArray[index]);

    }
</script>


</html>
